<template>
  <div class="container">
    <navbar title="提现详情" theme="light"></navbar>
    <list>
      <page-refresh v-on:refresh="onXRefresh" v-on:pullingDown="onPullingDown" :refreshing="refreshing"
                    :indicatorScale="indicatorScale"></page-refresh>
      <cell>
        <div class="panel">
          <wxc-cell title="收款人姓名" v-if="userWithdraw.payeeName">
            <text slot="value" class="cell-value">{{userWithdraw.payeeName}}</text>
          </wxc-cell>
          <wxc-cell title="收款支付宝">
            <text slot="value" class="cell-value">{{userWithdraw.payeeAccount}}</text>
          </wxc-cell>
          <wxc-cell title="金额">
            <text slot="value" class="cell-value">{{userWithdraw.money.toFixed(2)}}</text>
          </wxc-cell>
          <wxc-cell title="支付宝转账单号">
            <text slot="value" class="cell-value">{{userWithdraw.alipayOrderId || '-'}}</text>
          </wxc-cell>
          <wxc-cell title="转账时间">
            <text slot="value" class="cell-value">{{userWithdraw.payDate || '-'}}</text>
          </wxc-cell>
          <wxc-cell title="状态">
            <text slot="value" class="cell-value">{{userWithdraw.statusTitle}}</text>
          </wxc-cell>
          <wxc-cell title="备注">
            <text slot="value" class="cell-value">{{userWithdraw.remark}}</text>
          </wxc-cell>
        </div>
      </cell>
    </list>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/activeable";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .panel {
    margin-bottom: 10px;
    margin-top: 10px;
    &-body {
      padding: 20px;
    }
  }

  .cell-title {
    flex-direction: row;
    align-items: center;
    &-icon {
      margin-right: 10px;
      font-size: 40px;
      font-weight: 300;
    }
    &-text {
      color: $color-muted;
      font-size: 32px;
      font-weight: 300;
    }
  }

  .cell-value {
    color: $color;
    font-size: 28px;
    font-weight: 300;
  }

  .logout-btn {
    height: 100px;
    line-height: 100px;
    background-image: $gradient-bg-primary;
    color: #ffffff;
    font-size: 36px;
    text-align: center;
  }

</style>
<script>

import {WxcCell} from 'weex-ui'
let api = require('./include/api')
require('./include/page-xdom')
let queryparser = require('./include/queryparser')
module.exports = {
  mixins: [
    require('./mixin/page-refresh')
  ],
  components: {
    WxcCell,
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      userWithdraw: {},
      alipayOrderId: '',
      payDate: '',
      isLoadingShow: false,
      id: 0
    }
  },
  created () {
    let cfg = this.$getConfig()
    let param = queryparser(cfg.bundleUrl)
    this.id = param.id || ''
    this.loadData()
  },
  methods: {
    loadData () {
      return api.page.userWithdraw.data({id: this.id}).done(rs => {
        let data = rs.data
        this.userWithdraw = data.userWithdraw
        this.alipayOrderId = data.alipayOrderId
        this.payDate = data.payDate
      })
    },
    onXRefresh (event) {
      this.onRefresh(event, this.doRefresh())
    },
    doRefresh () {
      return this.loadData()
    }
  }
}
</script>
